<script type="text/x-template" id="layout-convert-form">
    <div>
        <div class="action-list">
            <div style="padding: 10px;">
                <el-button type="primary" @click="editLayoutStart">
                    创建布局
                </el-button>
            </div>
        </div>
        <div class="basic-container">
            <el-form ref="layoutConvertForm" :rules="rules" :model="layoutConvertTableFormData" label-width="170px">
                <el-form-item label="转化前布局Json" prop="layoutJsonBefore">
                    <cc-json-edit-el v-model="layoutConvertTableFormData.layoutJsonBefore"
                                     :mode="mode"
                                     lang="zh"
                                     @has-error="onError"
                    >
                    </cc-json-edit-el>
                </el-form-item>
                <el-form-item>
                    <div class="fieldBefore"
                         style="display:none; margin-left:15px; width:800px; clear: both;margin-top: 5px;">
                        <div id="layoutBefore" class="file" style="height:400px;">
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="转化后布局Json" prop="layoutJsonAfter">
                    <el-input
                            type="textarea"
                            v-model="layoutConvertTableFormData.layoutJsonAfter"
                            :rows="6"
                            disabled
                    >
                </el-form-item>
                <el-form-item>
                    <div class="fieldAfter"
                         style="display:none; margin-left:15px; width:800px; clear: both;margin-top: 5px;">
                        <div id="layoutAfter" class="file" style="height:400px;">
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="handleCopy()" style="width: 200px">复制转化后的布局Json</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <cc-layout-edit-el v-if="showLayoutEdit"
                           @layout-change="layoutChange"
                           @cancel="handleCancel"

        />
    </div>
</script>

<script>
    Vue.component('layout-convert-form', {
        template: '#layout-convert-form',
        data() {
            return {
                showLayoutEdit: false,
                mode: 'code',
                urls: {
                    convertLayout: '/v1/layout/convertLayout.html',
                },
                layoutConvertTableFormData: {
                    layoutJsonBefore: '',
                    layoutJsonAfter: '',
                },
                rules: {
                    layoutJsonBefore: [
                        {required: true, message: '请输入要转化的布局json'}
                    ]
                },
                errorIs: false,
                timer: null
            }
        },
        computed: {},
        methods: {
            editLayoutStart() {
                this.showLayoutEdit = true
            },
            layoutChange(layout) {
                this.showLayoutEdit = false
                this.layoutConvertTableFormData.layoutJsonBefore = layout;
            },
            handleCancel() {
                this.showLayoutEdit = false
            },
            onError(error) {
                this.errorIs = true
            },
            handleSubmit: function () {
                console.log(this.errorIs)
                this.$refs.layoutConvertForm.validate(function (valid) {
                    if (valid) {
                        this.handleLayoutConvert()
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            resetForm: function () {
                //重置按钮
                this.$refs.layoutConvertForm.resetFields();
            },
            handleLayoutConvert() {
                this.ajax(this.urls.convertLayout, {
                    layoutJson: JSON.stringify(this.layoutConvertTableFormData.layoutJsonBefore)
                }, function (res) {
                    var data = res;
                    if (data.code === '0') {
                        this.$message({
                            showClose: true,
                            message: '操作成功',
                            type: 'success'
                        })
                        var layoutJsonAfter = data.data;
                        this.layoutConvertTableFormData.layoutJsonAfter = layoutJsonAfter;
                    } else {
                        this.$message(data.msg);
                    }
                }.bind(this));
            },
            validLayout(layoutJson) {
                try {
                    var conType = JSON.parse(JSON.stringify(layoutJson)).type;
                } catch (e) {
                    this.$message('布局json有问题！')
                    return false;
                }
                if (!(conType == 'Panel' || conType == 'Lengthwise' || conType == 'Expander')) {
                    this.$message('布局json类型有问题！')
                    return false;
                }
                return true;
            },
            handleCopy: function () {
                if (this.layoutConvertTableFormData.layoutJsonAfter === '') {
                    this.$message('请输入需要转化的布局Json！')
                    return;
                }
                var textArea = document.createElement("textarea");
                textArea.style.position = 'fixed';
                textArea.style.top = '0';
                textArea.style.left = '0';
                textArea.style.width = '2em';
                textArea.style.height = '2em';
                textArea.style.padding = '0';
                textArea.style.border = 'none';
                textArea.style.outline = 'none';
                textArea.style.boxShadow = 'none';
                textArea.style.background = 'transparent';
                //key数据获取
                textArea.value = this.layoutConvertTableFormData.layoutJsonAfter;
                document.body.appendChild(textArea);
                textArea.select();
                try {
                    var successful = document.execCommand('copy');
                    if (successful) {
                        this.$message({
                            showClose: true,
                            message: '复制成功',
                            type: 'success'
                        })
                    }
                } catch (err) {
                    this.$message({
                        showClose: true,
                        message: '复制失败',
                        type: 'warning'
                    })
                }
                document.body.removeChild(textArea);

            },
            /***********************************************************************************************
             *@method ： buildLayout
             *@description ： 通过json生成布局
             *@param ：{String}wrapElId: 包裹层id
             *@param ：{Array}content: content 数据内容
             *@param ：{Number}ratio: ratio 缩放比例
             *@return ：void
             *@author ：Shelly
             *@createTime：
             *@modifyTime ：
             ***********************************************************************************************/
            buildLayout: function (wrapEl, content) {
                $(wrapEl).empty().addClass('pannel-wrap');
                var maxX = 0;
                var maxY = 0;
                $.each(content, function (index, val) {
                    val = val.resize ? val.resize : val;
                    maxX = Math.max(maxX, val.x + val.width);
                    maxY = Math.max(maxY, val.y + val.height);
                });

                var ratio = $(wrapEl).width() / maxX;

                $.each(content, function (i, v) {
                    var pannelContent = $('<div class="single-blcok"></div>').css({
                        top: v.y * ratio,
                        left: v.x * ratio,
                        width: v.width * ratio,
                        height: v.height * ratio
                    }).addClass('pannel-content')
                            .data({
                                contents: v,
                                resolution: v.width + '*' + v.height
                            })
                            .append('<span class="seq-num">' + (i + 1) + '</span>')
                            .append('<span class="size-mark">' + v.width + '*' + v.height + '</span>')
                            .append('<div name="topLeft" class="corner-img" style="position: absolute;top: 0px;left: 0"></div>')
                            .append('<div name="topRight" class="corner-img" style="position: absolute;top: 0px;right: 0"></div>');
                    if (v.resize) {
                        var div = $('<div></div>').css({
                            top: v.resize.y * ratio,
                            left: v.resize.x * ratio,
                            width: v.resize.width * ratio,
                            height: v.resize.height * ratio,
                            display: 'block',
                            position: 'absolute'
                        }).attr('draggable', true)
                                .append(pannelContent);
                        pannelContent.append('<div name="bottomLeft" class="corner-img" style="position: absolute;bottom: 30px;left: 0"></div>')
                        pannelContent.append('<div name="bottomRight" class="corner-img" style="position: absolute;bottom: 30px;right: 0"></div>');
                        pannelContent.append('<span class="close-block">×</span>');
                        if (v.title_info) {
                            div.append($('<div><span name="titleName">title</span></div>').css({
                                width: v.title_info.width * ratio,
                                height: v.title_info.height * ratio,
                                'font-size': v.title_info.size * ratio + "px",
                                'text-align': 'center'
                            }));
                        }
                        v.type === "Mall" ? pannelContent.append('<div name="smallPrice" class="specialSamll"><span name="secKillPrice" class="secKillPrice"></span><s name="price" class="price"></s></div>') : '';
                        $(wrapEl).append(div).height(maxY * ratio);
                        if ((v.resize.width * ratio < 150) && (v.type === "Mall")) {
                            $('.secKillPrice').css({'font-size': '10px', 'margin-right': '5px'});
                            $('.price').css({'font-size': '10px'});
                        }
                    } else {
                        pannelContent.css({
                            position: 'absolute'
                        }).attr('draggable', true);
                        pannelContent.append('<div name="bottomLeft" class="corner-img" style="position: absolute;bottom: 0;left: 0"></div>')
                        pannelContent.append('<div name="bottomRight" class="corner-img" style="position: absolute;bottom: 0;right: 0"></div>')
                        v.type === "Mall" ? pannelContent.append('<div style="bottom:5px" class="specialSamll" name="smallPrice"><span name="secKillPrice" class="secKillPrice"></span><s name="price" class="price"></s></div>') : '';
                        pannelContent.append('<span class="close-block">×</span>');
                        if ((v.width * ratio < 150) && (v.type === "Mall")) {
                            $('.specialSamll').css({'font-size': '10px !important'});
                        }
                        $(wrapEl).append(pannelContent).height(maxY * ratio);
                    }
                });
            }
        },
        watch: {
            'layoutConvertTableFormData.layoutJsonBefore': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        if (this.validLayout(newVal)) {
                            $('.fieldBefore').css('display', 'block');
                            this.buildLayout('#layoutBefore', JSON.parse(JSON.stringify(newVal)).contents);
                            this.handleSubmit();
                        }
                    } else {
                        $('.fieldBefore').css('display', 'none');
                    }
                }
            },
            'layoutConvertTableFormData.layoutJsonAfter': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        console.log('输入json布局：' + newVal)
                        $('.fieldAfter').css('display', 'block');
                        this.buildLayout('#layoutAfter', JSON.parse(newVal).contents);
                    } else {
                        $('.fieldAfter').css('display', 'none');

                    }
                }
            }
        },
        mounted() {

        },
        created() {
        }
    })
</script>
<style>
    .pannel-wrap {
        position: relative;
        margin: 10px 0;
    }

    .pannel-content {
        /*position: absolute;*/
        border: 1px solid #ccc;
        text-align: center;
    }

    .pannel-content.warning {
        border: 2px solid #f00;
    }

    .pannel-content .seq-num {
        position: relative;
        right: 10px;
        color: red;
        /*top: 0;*/
        /*left: 0;*/

    }

    .corner-img {
        width: 40px;
        height: 30px;
        background-size: inherit;
    }

    .pannel-content .size-mark {
        display: inline-block;
    }

    .pannel-content .hint {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #f00;
    }

    .small-price {
        position: absolute;
        bottom: 30px;
        left: 4%;
        width: 92%;
        height: 30px;
        line-height: 30px;
        background: #eee;
        font-size: 18px;
        border-radius: 10px;
    }

    .small-price span {
        display: inline-block;
    }

    .price {
        color: #b5b0b0;
    }

    .secKillPrice {
        color: #ff8d00;
        margin-right: 15px;
    }

    /*布局 end*/

    .page-sort ul {
        margin: 0;
        padding: 0;
    }

    .page-sort {
        width: 826px;
        height: auto;
        overflow: hidden;
        border: 1px #ccc solid;
        border-top: none;
        border-left: none;
    }

    .page-sort ul li {
        margin: 0;
        padding: 0;
        height: 35px;
        line-height: 35px;
        list-style: none;
        float: left;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        text-align: center;
    }

    .page-sort ul {
        clear: both;
    }

    .page-sort ul li input {
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;

    }

    .page-sort ul li input.radioClass {
        box-shadow: none;
    }

    .page-sort ul li span {
        cursor: pointer;
    }

    .image-data-list {
        width: 1070px;
        height: 200px;
    }

    .image-data-list ul {
        margin-left: 5px;
        height: 422px;
    }

    .image-data-list ul li {
        position: relative;

        width: 200px;
        height: 200px;
        border: solid 1px #ccc;

        float: left;
        margin: 5px;

        overflow: hidden;
    }

    .image-page-list {
        clear: both;
    }

    .image-data-list ul li img {
        width: auto;
        height: auto;
    }

    .image-data-list ul li input {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 16px;
        height: 16px;
    }

    .image-data-list ul li .info-maks {
        display: none;
        opacity: 0.8;
        background: #f5f5f5;
        color: #000;
        text-align: center;
        position: absolute;
        z-index: 11;
        bottom: 12%;
        margin-top: -18px;

    }

    .image-data-list ul li .info-maks dd {
        text-align: center;
        font-size: 14px;
        width: 200px;
    }

    .image-data-list ul li .bottom-mask {
        width: 200px;
        opacity: 0.6;
        position: absolute;
        bottom: 0px;
        height: 20px;
        z-index: 9;
        background: #000;

    }

    .image-data-list .data-list-left {
        height: 20px;
        position: absolute;
        bottom: 0px;
        left: 10px;
        color: #fff;
        z-index: 10;
        display: block;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 90px;
    }

    .image-data-list .data-list-right {
        height: 20px;
        position: absolute;
        bottom: 0;
        right: 10px;
        color: #fff;
        z-index: 10;
        display: block;
        line-height: 20px;

    }

    /* 小于400 */
    @media screen and (max-width: 600px) {

    }

    /* 小于400 */
    @media screen and (max-width: 1070px) {
        .image-data-list ul li .info-maks dd {
            text-align: center;
            width: 150px;
        }

        .image-data-list ul li .bottom-mask {
            width: 150px;
        }

        .base-tit {
            width: 100%;
            min-width: 820px;
        }

        .image-data-list .data-list-left {
            width: 70px;
        }

        .image-data-list {
            width: 820px;
            height: 200px;
        }

        .image-data-list ul {
            height: 322px;
        }

        .image-data-list ul li {
            width: 150px;
            height: 150px;
        }

        .image-data-list ul li img {
            width: auto;
            height: auto;
        }
    }
</style>
